<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/video-js.min.css"
      rel="stylesheet"
    />
    <title>Document</title>
    <style>
      #video {
        width: 800px;
      }
    </style>
  </head>

  <body>
    <button id="requestBtn">请求</button>
    <!-- vjs-big-play-centered 类名的作用是让我们的播放按钮居中 -->
    <video
      id="video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
    >
      <!-- 在source标签里写入我们的索引文件路径 -->
      <source src="" type="application/x-mpegURL" id="video1" />
    </video>
    <div id="loading" style="display: none">加载中...</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/video.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/7.10.1/lang/zh-CN.min.js"></script>

    <script>
      let btn = document.querySelector("#requestBtn");
      let loading = document.querySelector("#loading");
      let video1 = document.querySelector("#video1");

      btn.addEventListener("click", function (e) {
        e.preventDefault()
        btn.disabled = true; // 禁用按钮
        loading.style.display = "block"; // 显示加载提示
        $.ajax({
          url: "http://127.0.0.1:3000/getVideoPath",
          method: "GET",
          success: function (res) {
            console.log(res);
            video1.src = res.filePath;
            initVideo();
          },
        });
      });

      function initVideo() {
        videojs("video", {
          language: "zh-CN",
        });
      }
    </script>
  </body>
</html>
